<template>
<!-- v-if指令,只有指令表达式返回值为真时才会被渲染 -->
    <h3>条件渲染</h3>
    <!-- 如果flag为true,则显示你能看见我吗,否则显示else中的div -->
    <div v-if="flag">你能看见我吗</div>
    <div v-else>你还是看看我把</div>
<!-- v-else-if指令 -->
    <div v-if="type ==='A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>Not A/B/C</div>
<!-- v-show 指令 -->
     <div v-show="flag">我被显示</div>
</template>

<script name="ifDemo">
    export default { 
        data(){
            return{
                flag:false,
                type:"D"
            }
        }
    }   
</script>